<template>
  <div>
    <el-Card style="margin-top:20px">

      <!-- 这里用到了菜单 -->
      <template #header>
        <div class="main">
          <!-- 收集菜单项的index值 回头可以看是点击的销售额还是访问量 -->
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">销售额</el-menu-item>
            <el-menu-item index="2">访问量</el-menu-item>
          </el-menu>
          <!-- 单选框 -->
          <el-radio-group v-model="radio2">
            <el-radio-button label="今日" />
            <el-radio-button label="本周" />
            <el-radio-button label="本月" />
            <el-radio-button label="本年" />
          </el-radio-group>
          <!-- 日期选择器  选择一段时间-->
          <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To" start-placeholder="起始日期"
            end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" />

        </div>

      </template>

      <!-- 一定要记住在头部外面 -->
      <!-- 分布 栅格 -->
      <el-row>
            <el-col :span="18">
              <LeftView :activeIndex="activeIndex"></LeftView>
            </el-col>
            <el-col :span="6">
              <RightView :activeIndex="activeIndex"></RightView>
            </el-col>
          </el-row>
    </el-Card>
  </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'MiddleView',
})
</script>
  
<script lang="ts" setup>
import { ref } from 'vue'
import RightView from './RightView/index.vue'
import LeftView from './LeftView/index.vue'
// 首先给一个初始值 让其为1
const activeIndex = ref('1')
// 点击改变数据
function handleSelect(index: string) {
  // console.log(index);
  // 赋值 让其变化
  activeIndex.value = index
}
// 初始化单选框数据
const radio2 = ref('今日')

const size = ref<'default' | 'large' | 'small'>('default')
const value2 = ref('')
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

</script>
  
<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: 0 20px
}

// 弹性盒
.main {
  display: flex;
  // 垂直方向居中
  align-items: center
}

// 成长系数
.el-menu-demo {
  flex-grow: 5;
  border: none
}
</style>
  